import React, { useState, useEffect, useContext } from 'react'
import CustomBreadcrumb from '@/components/CustomBreadcrumb'
import { Tabs, Button, Pagination } from 'antd'
import MyCard from './conponents/myCard'
import GlobalContext from '@/containers/global.context'
import { useRequest } from 'ahooks'
import { requestWrapper } from '@/utils/request'
import newFormat from '@/utils/format.js'
import newAPI from '@/services/new'
import './styles.scss'

const { TabPane } = Tabs

export default props => {
    const { me } = useContext(GlobalContext)
    const [showList, setShowList] = useState([])
    const [releasedList, setShowReleasedList] = useState([])
    const [auditList, setShowAuditList] = useState([])
    const [deletedList, setShowDeletedList] = useState([])
    const [holdList, setShowHoldList] = useState([])

    const { data: newList, run: getNewList } = useRequest(
        () =>
            requestWrapper(newAPI.listById.bind(null, { userId: me.id }), {
                // autoSuccess: true,
            }),
        {
            manual: me.role === 'admin',
            formatResult: data => data || [],
            onSuccess: () => {
                setShowList(newList.list)
                let reList = newList.list.filter(value => {
                    return value.state === 'released'
                })
                setShowReleasedList(reList)
                let audList = newList.list.filter(value => {
                    return value.state === 'audit'
                })
                setShowAuditList(audList)
                let delList = newList.list.filter(value => {
                    return value.state === 'deleted'
                })
                setShowDeletedList(delList)
                let hoList = newList.list.filter(value => {
                    return value.state === 'hold'
                })
                setShowHoldList(hoList)
            }
        }
    )

    const { data: auditNews, run: getAuditList } = useRequest(
        ({ page }) =>
            requestWrapper(newAPI.auditList.bind(null, { pageSize: 6, page: page, state: 'audit' }), {
                // autoSuccess: true,
            }),
        {
            manual: me.role === 'normal',
            formatResult: data => data || [],
            defaultParams: [{ page: 1 }],
            onSuccess: () => {
                console.log(auditNews)
            }
        }
    )

    const toSet = () => {
        props.history.push('/user/my/set')
    }
    // useEffect( () => {
    //     setMe(JSON.parse(localStorage.getItem('myInfo')))
    // },[])
    return (
        <div className='my'>
            <div>
                <CustomBreadcrumb arr={['用户管理', '个人信息']}></CustomBreadcrumb>
            </div>
            <div className='my_content'>
                <div className='my_left'>
                    <div className='headImg'>
                        <img src={me.headImg ? me.headImg : 'assets/boy.jpg'} alt='' />
                    </div>
                    <h3>{me.username}</h3>
                    <p>{me.desc ? me.desc : '这家伙很懒，什么都没留下！'}</p>
                    <Button
                        onClick={() => {
                            toSet()
                        }}>
                        个人设置
                    </Button>
                    <div className='my_inf'>
                        权限：<strong>{me.role === 'admin' ? '管理员' : '普通用户'}</strong> <br />
                        今年：<strong>{me.age} 岁了</strong>
                    </div>
                </div>
                <div className='my_right'>
                    {me.role === 'normal' ? (
                        <Tabs defaultActiveKey='1'>
                            <TabPane tab='我的作品' key='1'>
                                <div className='item'>
                                    {showList.map(value => {
                                        return (
                                            <MyCard
                                                {...value}
                                                getNewList={getNewList}
                                                key={value.id}
                                                history={props.history}
                                            />
                                        )
                                    })}
                                </div>
                            </TabPane>
                            <TabPane tab='待审作品' key='2'>
                                <div className='item'>
                                    {auditList.map(value => {
                                        return (
                                            <MyCard
                                                {...value}
                                                getNewList={getNewList}
                                                key={value.id}
                                                history={props.history}
                                            />
                                        )
                                    })}
                                </div>
                            </TabPane>
                            <TabPane tab='已发布作品' key='3'>
                                <div className='item'>
                                    {releasedList.map(value => {
                                        return (
                                            <MyCard
                                                {...value}
                                                getNewList={getNewList}
                                                key={value.id}
                                                history={props.history}
                                            />
                                        )
                                    })}
                                </div>
                            </TabPane>
                            <TabPane tab='已禁用的作品' key='4'>
                                <div className='item'>
                                    {deletedList.map(value => {
                                        return (
                                            <MyCard
                                                {...value}
                                                getNewList={getNewList}
                                                key={value.id}
                                                history={props.history}
                                            />
                                        )
                                    })}
                                </div>
                            </TabPane>
                            <TabPane tab='草稿箱' key='5'>
                                <div className='item'>
                                    {holdList.map(value => {
                                        return (
                                            <MyCard
                                                {...value}
                                                getNewList={getNewList}
                                                key={value.id}
                                                history={props.history}
                                            />
                                        )
                                    })}
                                </div>
                            </TabPane>
                        </Tabs>
                    ) : (
                        <div>
                            <Tabs defaultActiveKey='1'>
                                <TabPane tab='待审核新闻' key='1'>
                                    <div className='item'>
                                        {auditNews &&
                                            auditNews.list.map(value => {
                                                return (
                                                    <MyCard
                                                        {...value}
                                                        key={value.id}
                                                        getNewList={getNewList}
                                                        isAdmin={true}
                                                        history={props.history}
                                                    />
                                                )
                                            })}
                                    </div>
                                </TabPane>
                            </Tabs>
                            <Pagination
                                hideOnSinglePage={true}
                                defaultCurrent={1}
                                pageSize={6}
                                total={auditNews && auditNews.total}
                                onChange={v => {
                                    getAuditList({ page: v })
                                }}
                            />
                        </div>
                    )}
                </div>
            </div>
        </div>
    )
}
